<template>
  <div class="wrapper">
    <div class="left" @click="toRouter">
      <el-avatar
        icon="el-icon-user-solid"
        size=""
        shape="circle"
        :src="avatar"
        fit="fill"
      ></el-avatar>
      <div class="info">
        <div class="head">
          <span class="name">{{ userInfo.nickName }}</span>
          <span>
            <LevelTag :level="userInfo.level"></LevelTag>
          </span>
        </div>
        <p class="remark">{{ userInfo.remark || "-" }}</p>
      </div>
    </div>
    <div class="right">
      <!-- <el-button text bg size="small" @click="follow(userInfo.id)">关注</el-button> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps } from "vue";
import defAva from "@/assets/images/default.jpg";
import { useRouter } from "vue-router";
import LevelTag from "./LevelTag/LevelTag.vue";
const props = defineProps({
  user: {
    type: Object,
    required: true,
  },
  to: {
    type: String,
  },
});

const avatar = computed(() => {
  const avatar = props.user.avatar;
  if (avatar === "") {
    return defAva;
  } else {
    return import.meta.env.VITE_BASE_URL + avatar;
  }
});

const userInfo = computed(() => props.user);

const router = useRouter();
const toRouter = () => {
  if (props.to) {
    router.push(props.to);
  }
};

function follow(id: number) {
  console.log("关注");
}
</script>

<style scoped lang="less">
.wrapper {
  display: flex;
  justify-content: space-between;
  // box-sizing: border-box;
  position: relative;
  .left {
    display: flex;
    cursor: pointer;
    &:hover {
      // color: rgb(64, 158, 255);
    }
  }
  .info {
    padding-left: 1rem;
    .head {
      .name {
        font-weight: 500;
      }
      .remark {
        color: rgba(14, 21, 28, 0.6);
      }
    }
  }
}
</style>
